<template>
  <!--循环展示noteli变量-->
  <div>
    <el-card
      shadow="hover"
      v-for="(note, index) in noteli"
      :key="note.noteId"
      class="mb-2"
    >
      <el-row>
        <el-col :span="24">
          <el-link type="primary">
            <!--引入详情页面-->
            <router-link :to="{ path: '/detail/' + note.noteId }" class="fs-3">
              {{ note.noteName }}
            </router-link>
          </el-link>
        </el-col>
      </el-row>

      <el-row class="mt-2">
        <el-col :span="3">
          <img class="w-100" :src="note.headUrl" />
        </el-col>
        <el-col :span="21" class="ps-2">
          {{ note.noteIntro }}
        </el-col>
      </el-row>

      <el-row class="mt-2">
        <el-col :span="3">{{ note.authorName }}</el-col>
        <el-col :span="6" class="ps-2">{{ note.publishTime }}</el-col>
        <el-col :span="3" :offset="1"
          ><el-icon class="h-100" @click="likeAction(note.noteId, index)"
            ><Star /></el-icon
          >{{ note.likeNum }}</el-col
        >
        <el-col :span="3"
          ><el-icon class="h-100"><ChatLineRound /></el-icon
          >{{ note.commentNum }}</el-col
        >
        <el-col :span="3"
          ><el-icon class="h-100"><View /></el-icon>{{ note.viewNum }}</el-col
        >
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { Star, ChatLineRound, View } from "@element-plus/icons-vue";

export default {
  name: "HomeComment",
  components: {
    Star,
    ChatLineRound,
    View,
  },
  data() {
    //data函数用于声明当前页面要使用的变量
    return {
      noteli: [], //用于展示笔记列表
    };
  },
  mounted() {
    //该函数是vue生命周期的一部分，该函数会在页面渲染完毕后执行
    this.getNoteli();
  },
//   watch: {
//     noteName() {
//       //监听noteName值的变化
//       console.log(this.noteName);
//       this.getNoteli();
//     },
//   },
  methods: {
    getNoteli() {
      this.$axios
        .get("api/home/list/comment")
        .then((response) => {
            let data =response.data
            if(data.code==200){
                this.noteli = data.data;

            }
          
        });
    },
    /**
     *noteId就是每个笔记的笔记id
     *index是当前笔记在noteli中的索引
     */
  },
};
</script>

<style>
</style>